<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EChartsComponent',
  mounted () {
    const myChart = echarts.init(this.$refs.echarts)
    myChart.setOption({
      title: {
        text: '多个折现图'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },

      series: [
        {
          name: 'Email',
          type: 'line',
          // 维度X   维度Y   其他维度 ...
          data: [120, 132, 101, 134, 90, 230, 210],
          // 平滑 如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线
          smooth: true,
          // 数据颜色
          color: 'green',
          // 折线样式
          lineStyle: {
            color: 'red',
            width: 2,
            type: 'solid'
          },
          // 折线显示数据
          label: {
            show: true
          },
          // 标注
          markPoint: {
            // 标点的里边的内容
            label: {
              normal: {
                formatter: function (param) {
                  return param != null ? param.value : '';
                }
              }
            },
            data: [
              {
                name: 'highest value',
                // 标点的类型
                type: 'max',
              },
              {
                name: 'lowest value',
                type: 'min',
              },
              {
                name: 'average value on close',
                type: 'average',
              }
            ],
            // 提示框的内容
            tooltip: {
              formatter: function (param) {
                return param.name + '<br>' + (param.data.coord || '');
              }
            }
          },
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped></style>
